<template>
  <div style="padding: 15px 30px">
    <el-form class="padding-top-15" label-width="120px" size="small" label-position="right">
      <el-row>
        <el-col :span="24">
          <el-form-item label="数据名称">
            <el-input readonly v-model="model.dataName"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="关联数据">
            <el-input type="textarea" :rows="3" readonly v-model="model.relationDataKey"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="适用范围">
            <el-input type="textarea" :rows="3" v-model="model.applyRange" readonly></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="数据定义">
            <el-input type="textarea" :rows="3" v-model="model.dataDefinition" readonly></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="计算公式">
            <el-input type="textarea" :rows="3" v-model="model.formula"  readonly></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="示例">
            <el-input type="textarea" :rows="3" v-model="model.example"  readonly></el-input>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <approve-info></approve-info>
  </div>
</template>

<script>
import {
  listRelationDictionary,
  dictionaryDetail
} from '../../api/dataDic';
import approveInfo from './approveInfo.vue';
export default {
    data() {
      return {
        model: {},
        dictionaryListItemDto: [],
        AssociatedData: []
      };
    },
    methods: {
      async getdataDicList() {
        const { rows } = await listRelationDictionary({});
        this.AssociatedData = rows;
      },
      async getDataDicDetail() {
        const res = await dictionaryDetail({ businessKey: this.$route.query.processWorkId });
        this.model = res;
      },
    },
    mounted() {
      this.getdataDicList();
      this.getDataDicDetail();
    },
    components: { approveInfo }
  };
</script>

<style lang="scss" scoped>
::v-deep .el-divider{
  margin: 30px;
}
  .flex-column {
    height: 100%;
    padding: 50px 310px 0;
    background-color: #ffffff;
    .justify-between {
      align-items: center;
    }
    .flex {
      width: 100%;
      padding: 0 50px;

      h2 {
        font-size: 30px;
        font-weight: 600;
        color: #333333;
        line-height: 42px;
      }

      p {
        font-size: 16px;
        color: #333333;
        line-height: 24px;

        span {
          font-size: 16px;
          color: #999;
        }
      }

      li {
        margin-bottom: 30px;
        h3 {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
          color: #333333;
          line-height: 30px;
          margin-bottom: 10px;

          i {
            display: inline-block;
            width: 4px;
            height: 16px;
            margin-right: 15px;
          }

          .box1 {
            background: #29c37f;
          }
          .box2 {
            background: #3384fe;
          }
          .box3 {
            background: #f79100;
          }
          .box4 {
            background: #ff6159;
          }
          .box5 {
            background: #688bae;
          }
        }

        p {
          line-height: 30px;
        }

        span {
          font-size: 16px;
          color: #333333;
          line-height: 24px;
          font-weight: 800;
          cursor: pointer;
          &:hover {
            color: #f79100;
          }
        }
      }
    }
  }
</style>